<template>
	<view>
		<view class="nav-bar">
			<view class="left">
			</view>
			<view class="center">
				收益报表
			</view>
			<view class="right" @tap="income">
				收支明细
			</view>
		</view>
		<!-- 余额面板 -->
		<view class="pan-pri">
			<view class="top">
				可提现余额
			</view>
			<view class="middle">
				<view class="left">
					36.75 
					<text class="txt">元</text>
				</view>
				<view class="right" @tap="withdraw">
					去提现
				</view>
			</view>
			<view class="bottom">
				每月20号可进行提现，每笔提现金额不能低于10元 
				<image @tap="withdraw" src="../../static/earnings/request_icon.png" mode=""></image>
			</view>
		</view>
		<!-- date -->
		<view class="data-pan">
			<view class="choose">
				<view @tap="choose(1)" class="choose-item" :class="checked==1?'choosed':''">
					今日
				</view>
				<view @tap="choose(2)" class="choose-item" :class="checked==2?'choosed':''">
					昨日
				</view>
				<view @tap="choose(3)" class="choose-item" :class="checked==3?'choosed':''">
					本月
				</view>
				<view @tap="choose(4)" class="choose-item" :class="checked==4?'choosed':''">
					上月
				</view>
			</view>
			<view class="pan">
				<view class="row">
					<view class="row-block" @tap="show2">
						<view class="top">
							点击数
							<image src="../../static/earnings/request_icon.png" mode=""></image>
						</view>
						<view class="bttom">
							00000
						</view>
					</view>
					<view class="row-block" @tap="show3">
						<view class="top">
							付款订单(笔)
							<image src="../../static/earnings/request_icon.png" mode=""></image>
						</view>
						<view class="bttom">
							00000
						</view>
					</view>
				</view>
				<view class="row">
					<view class="row-block" @tap="show4">
						<view class="top">
							付款预估收入(元)
							<image src="../../static/earnings/request_icon.png" mode=""></image>
						</view>
						<view class="bttom">
							00000
						</view>
					</view>
					<view class="row-block" @tap="show5">
						<view class="top">
							结算预估收入(元)
							<image src="../../static/earnings/request_icon.png" mode=""></image>
						</view>
						<view class="bttom">
							000000
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提现提示 -->
		<tui-modal :show="modal"   :custom="true" :maskClosable="false">
			<view class="content">
				<view class="top"> 提现提示</view>
				<view class="middle">确认收货的订单实时结算佣金，实时同步到“可提现金额中”。但只有每月20号当天可以进行提现，每笔提现金额不能低于10元。如果账户有余额未在20号当天提现，会累积，不会消失。</view>
				<view class="bottom" @tap="hide">我知道了</view>
			</view>
		</tui-modal>
		<!-- 点击数提示 -->
		<tui-modal :show="modal2"   :custom="true" :maskClosable="false">
			<view class="content">
				<view class="top"> 点击数提示</view>
				<view class="middle">由推广带来的您选择时间段内的商品和店铺的点击次数。</view>
				<view class="bottom" @tap="hide2">我知道了</view>
			</view>
		</tui-modal>
		<!-- 付款订单提示 -->
		<tui-modal :show="modal3"   :custom="true" :maskClosable="false">
			<view class="content">
				<view class="top">付款订单提示</view>
				<view class="middle">由推广带来的您选择时间段内的付款订单笔数。</view>
				<view class="bottom" @tap="hide3">我知道了</view>
			</view>
		</tui-modal>
		<!-- 付款预估收入提示 -->
		<tui-modal :show="modal4"   :custom="true" :maskClosable="false">
			<view class="content">
				<view class="top">付款预估收入提示</view>
				<view class="middle">由推广带来的您选择时间段内的付款金额产生的付款预估收入。</view>
				<view class="bottom" @tap="hide4">我知道了</view>
			</view>
		</tui-modal>
		<!-- 结算预估收入提示 -->
		<tui-modal :show="modal5"   :custom="true" :maskClosable="false">
			<view class="content">
				<view class="top">结算预估收入提示</view>
				<view class="middle">由推广带来的您选择时间段内的确认收货订单金额产生的结算预估收入。</view>
				<view class="bottom" @tap="hide5">我知道了</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import tuiModal from "@/components/modal/modal.vue"
	export default {
		components: {
			tuiModal
		},
		data() {
			return {
				checked:1,
				modal: false,
				modal2:false,
				modal3:false,
				modal4:false,
				modal5:false,
			}
		},
		methods:{
			//收支明细
			income(){
				uni.navigateTo({
					url:'/pages/earnings/payment/payment'
				})
			},
			choose(index){
				this.checked=index;
			},
			//去体现
			withdraw(){
				this.modal=true;
			},
			show2(){
				this.modal2=true;
			},
			show3(){
				this.modal3=true;
			},
			show4(){
				this.modal4=true;
			},
			show5(){
				this.modal5=true;
			},
			hide(){
				var myDate = new Date();
				myDate.getYear();        //获取当前年份(2位)
				myDate.getFullYear();    //获取完整的年份(4位,1970-????)
				myDate.getMonth();       //获取当前月份(0-11,0代表1月)
				myDate.getDate();        //获取当前日(1-31)
				this.modal=false;
				uni.navigateTo({
					url:'/pages/earnings/withdrawal/withdrawal'
				})
				if(myDate.getDate()==20){
					uni.navigateTo({
						url:'/pages/earnings/withdrawal/withdrawal'
					})
				}
			},
			hide2(){
				this.modal2=false;
			},
			hide3(){
				this.modal3=false;
			},
			hide4(){
				this.modal4=false;
			},
			hide5(){
				this.modal5=false;
			},
		}
	}
</script>

<style lang="scss">
	.nav-bar {
		height: 128upx;
		padding: 40upx 28upx 0;
		background:rgba(255,255,255,1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		width: 750upx;
		z-index: 9;

		.left{
			width:128upx;
			height:70px;
		}

		.center {
			width:144upx;
			line-height:70px;
			font-size:36upx;
			font-weight:500;
			color:rgba(51,51,51,1);
		}

		.right {
			width:128upx;
			font-size:32upx;
			font-weight:500;
			line-height:70px;
			color:rgba(51,51,51,1);
		}
	}
	.pan-pri{
		padding: 172upx 60upx 43upx 28upx;
		height: 392upx;
		background:linear-gradient(315deg,rgba(232,39,27,1) 0%,rgba(254,114,85,1) 100%);
		.top{
			font-size:28upx;
			font-weight:500;
			line-height:40upx;
			color:rgba(255,255,255,1);
		}
		.middle{
			height:100upx;
			color:rgba(255,255,255,1);
			line-height:100upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				font-size:52upx;
				font-weight:500;
				opacity:1;
				.txt{
					font-size:32upx;
				}
			}
			.right{
				width:140upx;
				height:60upx;
				border:1px solid rgba(255,255,255,1);
				border-radius:31upx;
				text-align: center;
				font-size:28upx;
				font-weight:500;
				line-height:58upx;
				color:rgba(255,255,255,1);
			}
		}
		.bottom{
			font-size:20upx;
			font-weight:500;
			height:70upx;
			line-height:70upx;
			color:rgba(255,181,181,1);
			display: flex; 
			align-items: center;
			image{
				display: block;
				width: 28upx;
				height: 28upx;
				margin-left: 10upx;
				margin-bottom: 5upx;
			}
		}
	}
	.data-pan{
		background:rgba(255,255,255,1);
		padding: 28upx;
		.choose{
			margin-top: 10upx;
			display: flex;
			justify-content: space-around;
			.choose-item{
				text-align: center;
				width:140upx;
				height:64upx;
				border:1px solid rgba(232,39,27,1);
				border-radius:32upx;
				font-size:32upx;
				font-weight:500;
				line-height:64upx;
				color:rgba(232,39,27,1);
			}
			.choosed{
				background:linear-gradient(309deg,rgba(232,39,27,1) 0%,rgba(254,114,85,1) 100%);
				color:rgba(255,255,255,1);
				border: none;
			}
		}
		.pan{
			margin-top: 30upx;
			width:692upx;
			height:360upx;
			border:1px solid rgba(232,39,27,1);
			border-radius:20upx;
			.row{
				height: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				.row-block{
					width: 50%;
					text-align: center;
					padding: 10upx;
					.top{
						color:rgba(232,39,27,1);
						font-size:24upx;
						text-align: center;
						font-weight:500;
						display: flex;
						justify-content: center;
						image{
							display:inline-block;
							margin-top: 5upx;
							width: 28upx;
							height: 28upx;
							margin-left: 10upx;
						}
					}
					.bttom{
						font-size:60upx;
						line-height: 60upx;
						font-weight:bold;
						color:#333333;
						overflow: auto;
					}
				}
			}
		}
	}
	//提现
	.content{
		.top{
			text-align: center;
			font-size:30upx;
			font-weight:bold;
			line-height:70upx;
			color:rgba(232,39,27,1);
		}
		.middle{
			font-size:27upx;
			font-weight:500;
			line-height:38upx;
			color:rgba(51,51,51,1);
			height: 197upx;
		}
		.bottom{
			margin: 20upx auto 0;
			width:338upx;
			height:78upx;
			background:rgba(232,39,27,1);
			border-radius:39upx;
			line-height: 78upx;
			text-align: center;
			font-size:32upx;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
	}
</style>
